<template>
  <view class="content">
    <image class="my-photo" src="@/static/my_top.png" mode="aspectFill"></image>
    <view class="cover"></view>
    <view class="my-card flexc">
      <view class="flexr align-center overflow-hidden">
        <image
          class="user"
          :src="userIcon"
          mode="aspectFill"
          @click="goPersonalInfo"
        ></image>
        <view class="flex-1 overflow-hidden">
          <view class="flexr align-center">
            <view
              class="vip"
              v-if="userStore.isLogin && Boolean(userStore.userInfo.vipLevel)"
              >{{ userStore.userInfo.vipLevel }}</view
            >
            <view class="name line-1">{{
              userStore.isLogin ? userStore.userInfo.customerName : "未登录"
            }}</view>
          </view>
          <view class="desc line-1">
            今天是你与合力思相遇的第{{ userStore.userInfo.registerDays }}天
          </view>
        </view>
        <image class="scan" src="@/static/scan.png" @click="goVipCode"></image>
      </view>
      <view class="divider"></view>
      <view class="datas flex-1 flexr align-center justify-spacebwt">
        <view class="flexc align-center" @click="goMyBalance">
          <view class="number">{{ userStore.userInfo.amount || 0 }}</view>
          <view class="label">余额</view>
        </view>
        <view class="flexc align-center" @click="goMyIntegral">
          <view class="number">{{ userStore.userInfo.integral || 0 }}</view>
          <view class="label">积分</view>
        </view>
        <view class="flexc align-center" @click="goCoupons">
          <view class="number">{{ userStore.userInfo.couponCount || 0 }}</view>
          <view class="label">优惠券</view>
        </view>
        <view class="flexc align-center" @click="goAvailableCount">
          <view class="number">{{
            userStore.userInfo.countCardCount || 0
          }}</view>
          <view class="label">消费次卡</view>
        </view>
      </view>
    </view>

    <view class="section flexr align-center">
      <view class="header"></view>
      <view class="title">我的功能</view>
    </view>
    <view class="group">
      <view class="group-item flexr align-center" @click="goIntegralMall">
        <image class="item-icon" src="@/static/vip_mall.png"></image>
        <text class="item-text flex-1">会员商城</text>
        <image class="item-arrow" src="@/static/arrow_right.png"></image>
      </view>
      <view class="group-item flexr align-center" @click="goBuyHistory">
        <image class="item-icon" src="@/static/buy_history.png"></image>
        <text class="item-text flex-1">消费历史记录</text>
        <image class="item-arrow" src="@/static/arrow_right.png"></image>
      </view>
    </view>

    <view class="group">
      <view class="group-item flexr align-center" @click="goAccounts">
        <image class="item-icon" src="@/static/family.png"></image>
        <text class="item-text flex-1"
          >家庭成员（{{
            userStore.isLogin ? userStore.userInfo.familyMemberCount : "0"
          }}）</text
        >
        <image class="item-arrow" src="@/static/arrow_right.png"></image>
      </view>
      <view class="group-item flexr align-center" @click="goRecommend">
        <image class="item-icon" src="@/static/addr.png"></image>
        <text class="item-text flex-1">我的推荐</text>
        <image class="item-arrow" src="@/static/arrow_right.png"></image>
      </view>
      <!-- <view class="group-item flexr align-center" @click="goAddress">
				<image class="item-icon" src="@/static/address.png"></image>
				<text class="item-text flex-1">收件地址</text>
				<image class="item-arrow" src="@/static/arrow_right.png"></image>
			</view> -->
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";
import { useUserStore } from "@/store/user";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { BuildImageUrl } from "@/api/api";
import applogo from "@/static/applogo.png";
const userStore = useUserStore();
const userIcon = computed(() => {
  // userStore.userInfo.headPortrait || applogo
  if (userStore.userInfo.headPortrait) {
    return BuildImageUrl(userStore.userInfo.headPortrait);
  }
  return applogo;
});
onShow(() => {
  if (userStore.isLogin) {
    userStore.getCustomerChilds();
  }
});
function goLogin() {
  uni.navigateTo({
    url: "/subpages/account/login",
  });
}
function goVipCode() {
  if (!userStore.isLogin) {
    goLogin();
    return;
  }
  uni.navigateTo({
    url: "/subpages/my/vip_code",
  });
}
function goMyIntegral() {
  if (!userStore.isLogin) {
    goLogin();
    return;
  }
  uni.navigateTo({
    url: "/subpages/my/my_integral",
  });
}
function goBuyHistory() {
  if (!userStore.isLogin) {
    goLogin();
    return;
  }
  uni.navigateTo({
    url: "/subpages/my/buy_history",
  });
}
function goCoupons() {
  if (!userStore.isLogin) {
    goLogin();
    return;
  }
  uni.navigateTo({
    url: "/subpages/my/coupon",
  });
}
function goIntegralMall() {
  if (!userStore.isLogin) {
    goLogin();
    return;
  }
  // uni.navigateTo({
  // 	url:"/subpages/my/integral_mall"
  // })
  if (userStore.userInfo.mallStatus === 0) {
    uni.showToast({
      title: "商城未开通",
      icon: "none",
    });
    return;
  }
  uni.navigateToMiniProgram({
    appId: "wx0465e83083889561",
    path: `pages/index/index?scene=${userStore.userInfo.mallCustAccountCode}`,
    envVersion: "release",
    success(res) {
      console.log("打开成功", res);
    },
  });
}
function goMyBalance() {
  if (!userStore.isLogin) {
    goLogin();
    return;
  }
  uni.navigateTo({
    url: "/subpages/my/my_balance",
  });
}
function goAvailableCount() {
  if (!userStore.isLogin) {
    goLogin();
    return;
  }
  uni.navigateTo({
    url: "/subpages/my/available_count",
  });
}
function goAccounts() {
  if (!userStore.isLogin) {
    goLogin();
    return;
  }
  uni.navigateTo({
    url: "/subpages/my/accounts",
  });
}
function goRecommend() {
  if (!userStore.isLogin) {
    goLogin();
    return;
  }
  uni.navigateTo({
    url: "/subpages/my/my_recommends",
  });
}
function goAddress() {
  if (!userStore.isLogin) {
    goLogin();
    return;
  }
  console.log("goAddress");
  uni.navigateTo({
    url: "/subpages/my/my_address",
  });
}
function goPersonalInfo() {
  if (!userStore.isLogin) {
    goLogin();
    return;
  }
  uni.navigateTo({
    url: "/subpages/my/personal_info",
  });
}
</script>

<style lang="scss">
.content {
  overflow-y: scroll;
  padding-bottom: 0rpx;
  // background-color: rgba(243, 243, 243, 1);
  .my-photo {
    height: 660rpx;
    min-height: 660rpx;
    width: 100%;
  }
  .cover {
    height: 175rpx;
    min-height: 175rpx;
    margin-top: -175rpx;
    background: linear-gradient(
      180deg,
      rgba(243, 243, 243, 0) 0%,
      rgba(243, 243, 243, 1) 100%
    );
    z-index: 1;
  }
  .my-card {
    height: 350rpx;
    min-height: 350rpx;
    margin-top: -175rpx;
    z-index: 100;
    background-color: #156557;
    border-radius: 32rpx;
    margin-left: 32rpx;
    margin-right: 32rpx;
    padding: 24rpx 32rpx;
    box-sizing: border-box;
    .user {
      width: 104rpx;
      height: 104rpx;
      box-sizing: border-box;
      border: 4rpx solid white;
      border-radius: 54rpx;
    }
    .vip {
      background-color: white;
      height: 32rpx;
      line-height: 32rpx;
      font-size: 22rpx;
      color: #156557;
      padding: 0 12rpx;
      border-radius: 100rpx;
      margin-left: 12rpx;
    }
    .name {
      color: white;
      font-size: 32rpx;
      margin-left: 12rpx;
    }
    .desc {
      margin-top: 5rpx;
      margin-left: 12rpx;
      font-size: 22rpx;
      color: white;
    }
    .scan {
      width: 64rpx;
      height: 64rpx;
      margin-left: 10rpx;
    }
    .divider {
      opacity: 0.2;
      margin-top: 27rpx;
      margin-bottom: 8rpx;
    }
    .datas {
      padding: 0 10rpx;
    }
    .number {
      font-size: 48rpx;
      color: white;
    }
    .label {
      margin-top: 11rpx;
      color: white;
    }
  }
  .section {
    margin: 32rpx;
  }
  .header {
    width: 8rpx;
    border-radius: 4rpx;
    height: 32rpx;
    min-height: 32rpx;
    background-color: $primary-color;
  }
  .title {
    font-size: 32rpx;
    color: $text-color1;
    margin-left: 16rpx;
  }
  .group {
    background-color: white;
    border-radius: 24rpx;
    margin: 0 32rpx;
    .group-item {
      height: 96rpx;
      min-height: 96rpx;
      padding: 0 34rpx;
      .item-icon {
        width: 40rpx;
        height: 40rpx;
      }
      .item-text {
        color: $text-color1;
        margin: 0 34rpx;
      }
      .item-arrow {
        width: 20rpx;
        height: 28rpx;
      }
    }
  }
  .group + .group {
    margin-top: 16rpx;
    margin-bottom: 16rpx;
  }
}
</style>
